<template>
	<div class="main"></div>
</template>

<script>
	export default {
		'name': 'view-other_static-national_day',
		'metaInfo': {
			'title': '上市送红包',
			'titleTemplate': '',
			'htmlAttrs': {},
			'bodyAttrs': {},
			'base': {},
			'meta': [
				{
					'charset': 'utf-8'
				},
				{
					'name': 'viewport',
					'content': 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui'
				},
				{
					'name': 'format-detection',
					'content': 'telephone=no,email=no'
				},
				{
					'name': 'apple-mobile-web-app-capable',
					'content': 'yes'
				},
				{
					'name': 'apple-mobile-web-app-status-bar-style',
					'content': 'black'
				},
				{
					'name': 'description',
					'content': '还卡超人'
				},
				{
					'name': 'keywords',
					'content': '还卡超人,拍拍贷'
				}
			],
			'link': [],
			'style': [],
			'script': [],
			'noscript': []
		},
		data() {
			return {
				'totalMoney': 1000000,
				'member': 0,
				'memberShow': 0,
				'moneyShow': 0,
				'userList': [],
				'ulOffsetTop': -300,
				'ulHeight': 0,
				'marqueeStep': 0.3,
				'growStep': 80,
				'hasAppBridge': !!window.AppBridge,
				'hasShareParam': !!this.$getURLSearchParam('shared')
			};
		},
		'watch': {
			/*member() {
				this.$nextTick(() => {
					let slider = document.querySelectorAll('.slider')[0];
					this.ulOffsetTop = slider.offsetTop;
					this.ulHeight = slider.offsetHeight;
					this.marquee();
					this.grow();
				});
			},
			money() {
				this.grow();
			}*/
		},
		'computed': {
			/*money() {
				return Math.ceil(this.totalMoney / this.member);
			},
			joinUrl() {
				return this.hasShareParam ? 'https://a.app.qq.com/o/simple.jsp?pkgname=com.ppdai.huanapp' : 'https://m.ppdai.com/?hh#1';
			}*/
		},
		'methods': {
			/*showShare() {
				try {
					AppBridge.shareData(JSON.stringify({
						'logoUrl': 'https://hh.ppdaicdn.com/static/images/activities/guoqinghuodong/share_logo.png?v=1',
						'title': '还卡超人疯狂派送1000000元大奖！',
						'subTitle': '劲爆福利！借完款还能再抢一百万大奖！人人有份，参与即送！',
						'shareUrl': location.href + '?shared=1',
						'redbag': 0
					}));
				} catch(ex) {}
			},
			getData() {
				this.$get('//m.huankachaoren.com/api/activity/data.htm').then(data => {
					this.member = data.shareMoney.userCount;
					// 如果参与人数是0，忽略参与名单
					if (!this.member) {
						return;
					}
					for (let i = 0; i < Math.ceil(10 / data.userList.length); ++i) {
						this.userList = this.userList.concat(data.userList);
					}
				});
			},
			marquee() {
				this.ulOffsetTop -= this.marqueeStep;
				if (this.ulOffsetTop + this.ulHeight < 0) {
					this.ulOffsetTop += this.ulHeight;
				}
				requestAnimationFrame(() => {
					this.marquee();
				});
			},
			grow() {
				this.memberShow = this.memberShow + Math.ceil(this.member / this.growStep);
				this.moneyShow = this.moneyShow + Math.ceil(this.money / this.growStep);
				if (this.moneyShow >= this.money) {
					this.memberShow = this.member;
					this.moneyShow = this.money;
					return;
				}
				requestAnimationFrame(() => {
					this.grow();
				});
			},*/
			appendExternalScript(url) {
				let $dynamicScript = document.createElement('script');
				$dynamicScript.type = 'text/javascript';
				$dynamicScript.async = true;
				$dynamicScript.src = url;
				document.body.appendChild($dynamicScript);
			}
		},
		mounted() {
			/*this.getData();
			!this.hasShareParam && this.hasAppBridge && this.showShare();
			requestAnimationFrame = requestAnimationFrame ||
				mozRequestAnimationFrame ||
				webkitRequestAnimationFrame;*/
			// Growingio
			let millisecondsPerSecond = 1000,
				secondsPerMinute = 60,
				minutesPerVersion = 5;
			this.appendExternalScript(`${document.location.protocol}//hh.ppdaicdn.com/static/scripts/common/growingio.js?v=3`);
			this.appendExternalScript(`${document.location.protocol}//hh.ppdaicdn.com/static/scripts/other_static/national_day.js
				?v=${parseInt(new Date().getTime() / millisecondsPerSecond / secondsPerMinute / minutesPerVersion, 10)}`);
		}
	};
</script>

<style scoped>
	/*.main {
		font-size: 16px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	section {
		overflow: hidden;
		position: relative;
	}
	div.number,
	a.btn {
		position: absolute;
		width: 100%;
	}
	div.number {
		top: 13.8%;
		left: 0;
	}
	div.member,
	div.money {
		float: left;
		width: 40%;
	}
	div.member {
		padding-left: 10%;
	}
	div.money {
		padding-right: 10%;
	}
	div.member p,
	div.money p {
		margin: 0;
		text-align: center;
	}
	div.member p:first-child,
	div.money p:first-child {
		margin-bottom: 8px;
		font-size: 16px;
	}
	div.member p:last-child,
	div.money p:last-child {
		font-size: 15px;
	}
	span.num,
	span.unit {
		vertical-align: bottom;
	}
	span.num {
		max-width: 4em;
		padding: 0 3px;
		color: red;
		font-weight: bold;
		font-size: 28px;
		line-height: 32px;
	}
	span.unit {
		line-height: 26px;
	}
	a.btn {
		top: 50.8%;
		left: 50%;
		overflow: hidden;
		width: 70.67%;
		height: auto;
		margin-left: -35.64%;
		color: transparent;
		background: transparent;
	}
	a.btn::after {
		content: "";
		display: block;
		overflow: hidden;
		height: 0;
		padding-top: 18.87%;
		font-size: 0;
		line-height: 0;
	}
	div.marquee {
		overflow: hidden;
		position: absolute;
		top: 18.58%;
		width: 73.66%;
		height: 60.56%;
		margin: 0 13.17%;
	}
	div.marquee ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	div.marquee li {
		height: 3em;
		line-height: 3em;
		white-space: nowrap;
		font-size: 15px;
		!*overflow: hidden;
		text-overflow: ellipsis;*!
	}
	div.marquee li::after {
		content: "";
		display: block;
		height: 1px;
		font-size: 0;
		line-height: 0;
		background: #cccccc;
	}
	.bkg {
		display: block;
		width: 100%;
	}*/
	.main {
		visibility: hidden;
	}
</style>
